<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>尺寸属性</title>
		<style>
			sp an{
				font-size: 20em;
				color: rgba(23, 153, 94);
			}
			/* 尺寸属性：最大宽度与最小宽度，功能：【屏幕】自适应 
			
			*/
		   div.container{
			   background-color: #ebe1ff;
		   }
		   div.box{
			   background-color: #ffd5f8;
			   /* 设置高度：80%*/
			   width: 80%;
			   /* 最大宽度属性：页面最大宽度值，如果与width同时出现，以最大宽度指 */
			   max-w idth: 600px;
			   /* 最小宽度属性：页面最小宽度值，达到最小值，页面内容不会被压缩
			     宽度与最小宽度同时出现，宽度大于最小宽度，宽度值以大的为准
				 宽度与最大宽度和最小宽度同时出现，宽度>最大宽度>最小宽度，宽度值以大的为准
			   */
			   min-width: 500px;
		   }
		</style>
	</head>
	<body>
		<div class="container">
			<div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore reiciendis veritatis illum nobis. Ex in nisi qui quisquam! Ratione voluptatem molestiae libero voluptate autem, aspernatur velit voluptatibus error nemo ducimus.</div>
		</div>
		<!-- 常用样式单位 
		   1.针对尺寸：%、px 绝对值 像素 
		   2.针对颜色：网页三原色：红、绿、蓝色, 组成页面任意颜色
		   rgba(0~255,0~200,0~255，0~1)
		   十六进制写法：#rrggbb      0~9 a~z A~Z  常用：#000000  #ffffff
		   简写：#000  #fff
		-->
		<span>lorem</span>
	</body>
</html>